<template>
  <div
    class="relative w-full h-full"
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-background="rgba(0, 0, 0, 0.7)"
  >
    <div class="box-border w-full h-full p-16 px-10">
      <div>
        <div class="relative">
          <div class="absolute w-full mt-6">
            <div v-if="simulationStore.curPipeLine === '全线'" class="flex items-center">
              <span class="mr-4">预测管道</span>
              <el-select v-model="allLinePipe" placeholder="请选择预测管道" style="width: 220px">
                <el-option
                  v-for="item in allLinePipeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div v-else class="flex items-center">
              <span class="mr-4">预测管道</span>
              <el-select
                disabled
                v-model="simulationStore.predictPipeline"
                placeholder="请选择预测管道"
                style="width: 220px"
              >
                <el-option
                  v-for="item in pipelineList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="flex items-center mt-4">
              <div class="flex items-center ml-auto">
                <span class="mr-6">时间进度条</span>
                <div class="flex items-center gap-4">
                  <el-button
                    :icon="isPlaying ? VideoPause : VideoPlay"
                    circle
                    @click="togglePlay"
                  />
                  <el-slider
                    v-model="timeProgress"
                    :min="0"
                    :max="simulationTime * 60"
                    :step="chartTimeInterval"
                    :format-tooltip="formatTimeTooltip"
                    @change="handleTimeProgressChange"
                  />
                </div>
              </div>
            </div>
            <div class="flex justify-end mt-4">
              <div class="flex items-center">
                <div
                  class="flex justify-center items-center w-10 h-10 bg-[#c1d1e4] rounded-full !border-[#638dbc] !border-2"
                >
                  <img
                    src="../../../assets/images/refresh3.png"
                    class="w-6 h-6 cursor-pointer refresh-icon"
                    :style="{ transform: `rotate(${rotationDegree}deg)` }"
                    @click="refreshTime"
                  />
                </div>
                <div class="flex items-center ml-4">
                  <el-input v-model="day" class="!w-[60px]" type="number" :min="0" :max="60" />
                  <span class="mx-2">天</span>
                  <el-input v-model="hour" class="!w-[60px]" type="number" :min="0" :max="24" />
                  <span class="mx-2">时</span>
                  <el-input v-model="minute" class="!w-[60px]" type="number" :min="0" :max="60" />
                  <span class="mx-2">分</span>
                  <el-input v-model="second" class="!w-[60px]" type="number" :min="0" :max="60" />
                  <span class="mx-2">秒</span>
                </div>
              </div>
            </div>
            <div v-show="!isShowQGQYX" class="flex justify-between" style="height: 500px">
              <v-chart
                ref="chartRef1"
                :option="chart1Options"
                style="width: 32%; height: 100%"
                :autoresize="true"
              />
              <v-chart
                ref="chartRef2"
                :option="chart2Options"
                style="width: 32%; height: 100%"
                :autoresize="true"
              />
              <v-chart
                ref="chartRef3"
                :option="chart3Options"
                style="width: 32%; height: 100%"
                :autoresize="true"
              />
            </div>
            <div v-show="isShowQGQYX" class="flex justify-between" style="height: 500px">
              <v-chart
                ref="chartRef1Copy"
                :option="chart1CopyOptions"
                style="width: 32%; height: 100%"
                :autoresize="true"
              />
              <v-chart
                ref="chartRef4"
                :option="chart4Options"
                style="width: 32%; height: 100%"
                :autoresize="true"
              />
              <div style="width: 32%; height: 80%" class="p-4">
                <div class="mb-4 text-base font-bold text-center">清管器运行参数表</div>
                <table
                  v-if="simulationStore.curPipeLine === '全线'"
                  class="w-full h-full border border-collapse"
                >
                  <thead>
                    <tr>
                      <th class="bg-gray-100 border">运行参数</th>
                      <th class="bg-gray-100 border">乌百线</th>
                      <th class="bg-gray-100 border">百克线</th>
                      <th class="bg-gray-100 border">调油一线</th>
                      <th class="bg-gray-100 border">81线</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="w-1/5 text-center border">清管器运移速度（m/s）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_pig0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_pig1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_pig2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_pig3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-1/5 text-center border">管内油品流速（m/s）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_oil0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_oil1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_oil2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.v_oil3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-1/5 text-center border">距管道起点的距离（km）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.LOC0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.LOC1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.LOC2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.LOC3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-1/5 text-center border">距管道终点的距离（km）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RLOC0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RLOC1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RLOC2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RLOC3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-1/5 text-center border">预计到达终点时间（h）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.ETA0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.ETA1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.ETA2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.ETA3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-1/5 text-center border">到达终点剩余时间（h）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RETA0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RETA1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RETA2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RETA3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-1/5 text-center border">距终点的剩余管道容积（m3）</td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RVOL0" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RVOL1" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RVOL2" class="no-style-input !text-base" />
                      </td>
                      <td class="border">
                        <el-input v-model="qx_QGQParams.RVOL3" class="no-style-input !text-base" />
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table v-else class="w-full h-full border border-collapse">
                  <tbody>
                    <tr>
                      <td class="w-2/3 text-center border">清管器运移速度（m/s）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.v_pig" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-2/3 text-center border">管内油品流速（m/s）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.v_oil" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-2/3 text-center border">距管道起点的距离（km）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.LOC" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-2/3 text-center border">距管道终点的距离（km）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.RLOC" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-2/3 text-center border">预计到达终点时间（h）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.ETA" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-2/3 text-center border">到达终点剩余时间（h）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.RETA" class="no-style-input !text-base" />
                      </td>
                    </tr>
                    <tr>
                      <td class="w-2/3 text-center border">距终点的剩余管道容积（m3）</td>
                      <td class="border">
                        <el-input v-model="QGQParams.RVOL" class="no-style-input !text-base" />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  MarkLineComponent,
  DataZoomComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { provide } from 'vue'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  MarkLineComponent,
  DataZoomComponent
])

provide(THEME_KEY, 'light')

import {
  getTemperatureChartOption,
  getPressureChartOption,
  getFlowChartOption,
  getCombinedPressureFlowChartOption
} from './chart-options'

import { VideoPause, VideoPlay } from '@element-plus/icons-vue'

import { useSimulationStore } from '@/stores/modules/simulation'
import { nextTick, watch, ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  simulationTime: {
    type: Number,
    required: false,
    default: 0
  },
  timeInterval: {
    type: [String, Number],
    required: false,
    default: 10
  },
  chartData1: {
    type: Array,
    required: false,
    default: () => []
  },
  chartData2: {
    type: Array,
    required: false,
    default: () => []
  }
})

const route = useRoute()
const simulationStore = useSimulationStore()

simulationStore.curPipeLine = '全线'
simulationStore.predictPipeline = '乌百线（乌尔禾站-百克站）'


simulationStore.distance_qx1 = props.chartData1 || []
simulationStore.distance_qx2 = props.chartData2 || []
simulationStore.distance_variation_data = simulationStore.distance_qx1
simulationStore.batch_data = props.chartData1 || []
simulationStore.batch_data_ty = props.chartData2 || []

const chartTimeInterval = computed(() => props.timeInterval)
const simulationTime = computed(() => props.simulationTime)

const chart1Options = ref(getTemperatureChartOption(0))
const chart2Options = ref(getPressureChartOption(0))
const chart3Options = ref(getFlowChartOption(0))
const chart4Options = ref(getCombinedPressureFlowChartOption(0))
const chart1CopyOptions = ref(getTemperatureChartOption(0))

const timeProgress = ref(0)

// 全线的时候管道为乌尔禾-百克站-701-总站和81#站
const allLinePipe = ref('乌尔禾-百克站-701-总站')
const allLinePipeList = [
  { id: 1, value: '乌尔禾-百克站-701-总站' },
  { id: 2, value: '81#站' }
]
watch(allLinePipe, (val) => {
  if (simulationStore.curPipeLine === '全线') {
    if (val === '乌尔禾-百克站-701-总站') {
      simulationStore.distance_variation_data = simulationStore.distance_qx1
    } else {
      simulationStore.distance_variation_data = simulationStore.distance_qx2
    }
    refreshTime()
  }
})

const pipelineList = [
  { id: 1, value: '乌百线（乌尔禾站-百克站）' },
  { id: 2, value: '百克线（百克站-701站）' },
  { id: 3, value: '调油一线（701站-总站）' },
  { id: 4, value: '新81#线（81#站-701）' }
]

const isRotating = ref(false)
const rotationDegree = ref(0)

const barLineRef = ref(null)
const refreshTime = () => {
  console.log('refresh time')
  isRotating.value = true
  rotationDegree.value += 360
  setTimeout(() => {
    isRotating.value = false
  }, 100)

  if (timer.value) {
    clearInterval(timer.value)
  }

  currentIndex = 0
  currentTime.value = 0
  day.value = '0'
  hour.value = '0'
  minute.value = '0'
  second.value = '0'
  timeProgress.value = 0 // 重置时间进度

  nextTick(() => {
    chart1Options.value = getTemperatureChartOption(0)
    chart1CopyOptions.value = getTemperatureChartOption(0)
    chart2Options.value = getPressureChartOption(0)
    chart3Options.value = getFlowChartOption(0)
    chart4Options.value = getCombinedPressureFlowChartOption(0)

    startTimer()
    if (simulationStore.batch_data.length > 0) {
      console.log('重置barLine')
      if (barLineRef.value) {
        barLineRef.value.refreshData()
      }
    }
  })
}

const day = ref('0')
const hour = ref('0')
const minute = ref('0')
const second = ref('0')

const chartRef1 = ref(null)
const chartRef2 = ref(null)
const chartRef3 = ref(null)
const chartRef1Copy = ref(null)
const chartRef4 = ref(null)

const currentTime = ref(0)
const timePoints = computed(() => {
  const points = []
  const simulationTimeInMinutes = simulationTime.value * 60
  const totalPoints = Math.floor(simulationTimeInMinutes / chartTimeInterval.value)
  for (let i = 0; i <= totalPoints; i++) {
    points.push(i * chartTimeInterval.value)
  }
  return points
})
let currentIndex = 0

const pig_data = computed(() => simulationStore.pig_data)
const qx_pig_data = computed(() => simulationStore.qx_pig_data)
const QGQParams = ref({
  v_pig: '',
  v_oil: '',
  LOC: '',
  RLOC: '',
  ETA: '',
  RETA: '',
  RVOL: ''
})
const qx_QGQParams = ref({
  // 乌百线参数
  v_pig0: '',
  v_oil0: '',
  LOC0: '',
  RLOC0: '',
  ETA0: '',
  RETA0: '',
  RVOL0: '',

  // 百克线参数
  v_pig1: '',
  v_oil1: '',
  LOC1: '',
  RLOC1: '',
  ETA1: '',
  RETA1: '',
  RVOL1: '',

  // 调油一线参数
  v_pig2: '',
  v_oil2: '',
  LOC2: '',
  RLOC2: '',
  ETA2: '',
  RETA2: '',
  RVOL2: '',

  // 81线参数
  v_pig3: '',
  v_oil3: '',
  LOC3: '',
  RLOC3: '',
  ETA3: '',
  RETA3: '',
  RVOL3: ''
})
const updateChartAndQGXParams = () => {
  const time = timePoints.value[currentIndex]
  currentTime.value = time
  timeProgress.value = time // 确保时间进度同步

  const totalMinutes = time
  day.value = Math.floor(totalMinutes / (24 * 60)).toString()
  hour.value = Math.floor((totalMinutes % (24 * 60)) / 60).toString()
  minute.value = Math.floor(totalMinutes % 60).toString()
  second.value = '0'

  if (simulationStore.curPipeLine === '全线') {
    qx_QGQParams.value = qx_pig_data.value[currentIndex] || {
      // 乌百线参数
      v_pig0: '',
      v_oil0: '',
      LOC0: '',
      RLOC0: '',
      ETA0: '',
      RETA0: '',
      RVOL0: '',

      // 百克线参数
      v_pig1: '',
      v_oil1: '',
      LOC1: '',
      RLOC1: '',
      ETA1: '',
      RETA1: '',
      RVOL1: '',

      // 调油一线参数
      v_pig2: '',
      v_oil2: '',
      LOC2: '',
      RLOC2: '',
      ETA2: '',
      RETA2: '',
      RVOL2: '',

      // 81线参数
      v_pig3: '',
      v_oil3: '',
      LOC3: '',
      RLOC3: '',
      ETA3: '',
      RETA3: '',
      RVOL3: ''
    }
  } else {
    QGQParams.value = pig_data.value[currentIndex] || {
      v_pig: '',
      v_oil: '',
      LOC: '',
      RLOC: '',
      ETA: '',
      RETA: '',
      RVOL: ''
    }
  }

  chart1Options.value = getTemperatureChartOption(time)
  chart1CopyOptions.value = getTemperatureChartOption(time)
  chart2Options.value = getPressureChartOption(time)
  chart3Options.value = getFlowChartOption(time)
  chart4Options.value = getCombinedPressureFlowChartOption(time)
}

const timer = ref(null)

const isPlaying = ref(true)

const startTimer = () => {
  // 如果已经有计时器在运行，先清除它
  if (timer.value) {
    clearInterval(timer.value)
  }

  isPlaying.value = true
  timer.value = setInterval(() => {
    // 检查是否到达最后一个时间点
    if (currentIndex >= timePoints.value.length - 1) {
      clearInterval(timer.value)
      timer.value = null
      isPlaying.value = false
      return
    }

    // 只有在播放状态下才更新
    if (isPlaying.value) {
      currentIndex++
      updateChartAndQGXParams()
    } else {
      // 如果不是播放状态，停止计时器
      clearInterval(timer.value)
      timer.value = null
    }
  }, 200)
}

const togglePlay = () => {
  if (isPlaying.value) {
    // 暂停播放
    if (timer.value) {
      clearInterval(timer.value)
      timer.value = null
    }
    isPlaying.value = false
  } else {
    // 当前不在播放状态，开始播放
    startTimer()
  }
}

const updateTimeAndChart = () => {
  const totalMinutes =
    Number(day.value) * 24 * 60 +
    Number(hour.value) * 60 +
    Number(minute.value) +
    Number(second.value) / 60

  if (totalMinutes >= 0 && totalMinutes <= simulationTime.value * 60) {
    timeProgress.value = Math.floor(totalMinutes)

    day.value = Math.floor(totalMinutes / (24 * 60)).toString()
    hour.value = Math.floor((totalMinutes % (24 * 60)) / 60).toString()
    minute.value = Math.floor(totalMinutes % 60).toString()
    second.value = Math.floor((totalMinutes % 1) * 60).toString()

    chart1Options.value = getTemperatureChartOption(totalMinutes)
    chart1CopyOptions.value = getTemperatureChartOption(totalMinutes)
    chart2Options.value = getPressureChartOption(totalMinutes)
    chart3Options.value = getFlowChartOption(totalMinutes)
    chart4Options.value = getCombinedPressureFlowChartOption(totalMinutes)
  }
}

watch([day, hour, minute, second], () => {
  if (
    day.value !== '' &&
    hour.value !== '' &&
    minute.value !== '' &&
    second.value !== '' &&
    !isPlaying.value
  ) {
    updateTimeAndChart()
  }
})

const handleTimeProgressChange = (minutes) => {
  // 强制暂停播放
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  isPlaying.value = false

  // 更新时间显示
  day.value = Math.floor(minutes / (24 * 60)).toString()
  hour.value = Math.floor((minutes % (24 * 60)) / 60).toString()
  minute.value = Math.floor(minutes % 60).toString()
  second.value = '0'

  // 更新当前索引和参数
  currentIndex = Math.floor(minutes / chartTimeInterval.value)
  timeProgress.value = minutes // 确保进度条显示正确

  // 更新清管器参数
  if (simulationStore.curPipeLine === '全线') {
    qx_QGQParams.value = qx_pig_data.value[currentIndex] || {
      // 乌百线参数
      v_pig0: '',
      v_oil0: '',
      LOC0: '',
      RLOC0: '',
      ETA0: '',
      RETA0: '',
      RVOL0: '',

      // 百克线参数
      v_pig1: '',
      v_oil1: '',
      LOC1: '',
      RLOC1: '',
      ETA1: '',
      RETA1: '',
      RVOL1: '',

      // 调油一线参数
      v_pig2: '',
      v_oil2: '',
      LOC2: '',
      RLOC2: '',
      ETA2: '',
      RETA2: '',
      RVOL2: '',

      // 81线参数
      v_pig3: '',
      v_oil3: '',
      LOC3: '',
      RLOC3: '',
      ETA3: '',
      RETA3: '',
      RVOL3: ''
    }
  } else {
    QGQParams.value = pig_data.value[currentIndex] || {
      v_pig: '',
      v_oil: '',
      LOC: '',
      RLOC: '',
      ETA: '',
      RETA: '',
      RVOL: ''
    }
  }

  // 更新图表
  chart1Options.value = getTemperatureChartOption(minutes)
  chart1CopyOptions.value = getTemperatureChartOption(minutes)
  chart2Options.value = getPressureChartOption(minutes)
  chart3Options.value = getFlowChartOption(minutes)
  chart4Options.value = getCombinedPressureFlowChartOption(minutes)
}

const formatTimeTooltip = (minutes) => {
  const days = Math.floor(minutes / (24 * 60))
  const hours = Math.floor((minutes % (24 * 60)) / 60)
  const mins = Math.floor(minutes % 60)
  return `${days}天${hours}时${mins}分0秒`
}

onMounted(async () => {
  startTimer()
})

const isShowQGQYX = ref(false)

watch(
  () => route.query,
  (val) => {
    console.log('🐯 ~ watch ~ val:', val)
    if (val.isQGQYX || pig_data.value.length > 0 || qx_pig_data.value.length > 0) {
      console.log('🐯 ~ pig_data.value:', pig_data.value)
      console.log('🐯 ~ val.isQGQYX:', val.isQGQYX)
      console.log('🐯 ~ qx_pig_data.value.length:', qx_pig_data.value.length)
      isShowQGQYX.value = true
    } else {
      isShowQGQYX.value = false
    }

    if (val.oils_id) {
      nextTick(() => {
        refreshTime()
      })
    }
  },

  { immediate: true }
)

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})

const loading = ref(false)
const loadingText = '加载中...'

onDeactivated(() => {})
</script>

<style lang="scss" scoped>
.custom-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #4678b2;
  color: #4678b2;
  background-color: #e8edf4;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    color: white;
    border-color: #5889bf;
    background-color: #4678b2;
  }
}

:deep(.el-slider) {
  width: 240px;
}

.refresh-icon {
  transition: transform 1s;
  transform: rotate(0deg);
  &.rotate {
    transform: rotate(360deg);
  }
}

:deep(.el-dialog__header) {
  font-weight: 700;
  height: 48px;
  line-height: 48px;
  padding: 0 !important;

  .el-dialog__title {
    font-size: 18px !important;
  }
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}
.custom-button5 {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 180px;
  height: 40px;
  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button6 {
  background-color: rgba(69, 122, 178, 1);
  border: 1px solid rgba(69, 122, 178, 1);
  color: white;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
}

.border {
  border: 1px solid black;
}
.leftBorder {
  border-left: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.bg_table_header {
  background-color: rgba(247, 247, 247, 1);
}

:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}
:deep(.el-input__inner) {
  text-align: center;
}
</style>
